<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>RTMP/FLV 直播播放器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #video-container {
            max-width: 800px;
            margin: 0 auto;
        }
        #videoElement {
            width: 100%;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div id="video-container">
        <h1>视频会议直播</h1>
        <video id="videoElement" controls autoplay></video>
        <p id="status">正在初始化播放器...</p>
    </div>

    <script>
    // 获取 URL 参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }
        const rtmpUrl = getQueryParam('addr');
        // 检查浏览器是否支持flv.js
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var statusElement = document.getElementById('status');

            var streamUrl = rtmpUrl;
            console.log('Playing URL:', streamUrl);
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: streamUrl,
                isLive: true
            });

            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();

            try {
                flvPlayer.play();
            } catch (err) {
                statusElement.textContent = '播放错误: ' + err.message;
                console.error(err);
            }

            flvPlayer.on(flvjs.Events.ERROR, function(err) {
                statusElement.textContent = '播放错误: ' + err.detail;
                console.error(err);
            });
        } else {
            document.getElementById('status').textContent = '您的浏览器不支持flv.js，无法播放此视频流';
        }
    </script>
</body>
</html> 